<template>
    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
        <u-toast ref="uToast" />
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
            <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">领券专区</view>
            <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <view class="coreshop-margin-bottom-10 coreshop-bg-main coreshop-text-black">
            <scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation>
                <view class="groupon-card-wrap coreshop-flex coreshop-align-center">
                    <view v-for="(item, index) in coreshopData.parameters.list" :key="index">
                        <view class="coreshop-padding-right-5">
                            <view class="coupon-wrap " :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }">
                                <view class="coupon-item coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
                                    <view class="coupon-left coreshop-flex coreshop-flex-direction">
                                        <view class="sum-box">
                                            <text class="unit" style="color: #6b3f12">￥</text>
                                            <text class="sub" style="color: #6b3f12">{{ item.name }}</text>
                                        </view>
                                        <view class="notice " style="color: #9d6d25">
                                            <text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text>
                                        </view>
                                        <view class="notice" style="color: #9d6d25">
                                            有效期：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} 至 {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}
                                        </view>
                                    </view>
                                    <view class="coupon-right coreshop-flex coreshop-flex-direction">
                                        <button class="get-btn" :style="{ color: bgColor1 }" @tap.stop="receiveCoupon(item.id)">立即领取</button>
                                        <view class="surplus-num" style="color: #9d6d25">
                                            <text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopCoupon",
        components: {
        },
        props: {
            coreshopData: {
                type: Object,
                required: true,
            }
        },
        computed: {
            count() {
                if (!this.coreshopData) {
                    return false;
                }
                if (!this.coreshopData.parameters) {
                    return false;
                }
                if (!this.coreshopData.parameters.list) {
                    return false;
                }
                return (this.coreshopData.parameters.list.length > 0)
            }
        },
        created() {
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
    .coupon-wrap { mask: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); mask-size: 100% 100%; position: relative; border-radius: 5px; width: 355px; height: 100px; background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning);
        .coupon-item { width: 100%; height: 100%; border-radius: 5px;
            .coupon-left { justify-content: center; padding-left: 10px; padding-right: 5px;
                .unit { font-size: 12px; color: #fff; }
                .sum { font-size: 22.5px; font-weight: bold; color: #fff; line-height: 22.5px; padding-right: 5px; }
                .sub { font-size: 18px; font-weight: bold; color: #fff; line-height: 18px; padding-right: 5px; }
                .notice { font-size: 11px; color: rgba(#fff, 0.7); margin-top: 3px; }
            }
            .coupon-right { min-width: 110px; justify-content: center; align-items: center; padding-right: 5px;
                .get-btn { width: 72px; height: 27px; background: #ffffff; border-radius: 13px; padding: 0; font-size: 12px; font-weight: 500; color: $u-type-warning; }
                .surplus-num { font-size: 11px; font-weight: 500; color: #fff; margin-top: 7px; }
            }
        }
    }
    </style>
